<template>
  <div class='table'>
    <ui-container style="width:100%">
      <div class='t_top'>
        <el-select v-model="status" placeholder="申请状态" size="small"> 
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" @click="search()" >查询</el-button>
      </div>
    </ui-container>
    <ui-container style='margin-top:15px' v-loading="loading">
      <div class='t_bottom' style="width:100%; font-size:14px;">
        <el-table
          ref='multipleTable'
          :data='tableData'
          tooltip-effect='light'
          style='width:100%'
          border
        >
          <el-table-column prop='UserNumber' label='会员号' width='200'></el-table-column>
          <el-table-column prop='UserName' label='用户名' width='100' show-overflow-tooltip></el-table-column>
          <el-table-column prop='Amount' label='账单金额' width='100' show-overflow-tooltip>
            <template slot-scope="scope">
              <span>￥{{scope.row.Amount}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="FileUrl" label="审核图片" width='120'>
            <template slot-scope="scope">
              <img :src="scope.row.FileUrl" style="width:120px;height:120px;" />
            </template>
          </el-table-column>
           <el-table-column prop='CreateTimeStr' width='180' label='申请时间'>
          </el-table-column>
           <el-table-column prop='ApplyStateStr' width='100' label='申请状态'>
          </el-table-column>、
          <el-table-column prop='Reason' label='拒绝原因'>
          </el-table-column>
          <el-table-column prop='isok' label='操作' width='100' show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type="text" @click="handleClick(scope.row)" v-text="scope.row.ApplyState===0?'审核':'查看'"></el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="pagination-row">
          <el-pagination
            background
            layout="total,prev, pager, next,sizes"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @current-change = "crurentChange"
            @size-change = "sizeChange"
            :total="totalNum">
          </el-pagination>
        </div>
      </div>
    </ui-container>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <div style="margin:10px 0;font-size:36px;">金额：￥<span style="color:red;">{{Amount}}</span></div>
      <div><img :src="FileUrl"  min-width="70" height="70" /></div>
      <div slot="footer" class="dialog-footer" v-if="!isClick">
        <el-button type="primary" @click="submitForm(true)" size="small">审核通过</el-button>
        <el-button type="danger" @click="dialogReason = true;" size="small">审核失败</el-button>
      </div>
      <div v-if="isClick && Reason!=='' && Reason!==null">
        <p style="margin:10px 0;">失败原因：</p>
        <el-input
          readonly
          type="textarea"
          :rows="3"
          placeholder=""
          v-model="Reason">
        </el-input>
      </div>
    </el-dialog>
    <el-dialog title="失败原因" :visible.sync="dialogReason">
      <el-input
        type="textarea"
        :rows="6"
        placeholder=""
        v-model="Reason">
      </el-input>
      <div slot="footer" class="dialog-footer" v-if="!isClick">
        <el-button type="primary" @click="submitForm(false)" size="small">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type='text/javascript'>
export default {
  name: 'integralList',
  data () {
    return {
      statusList:[{
          value: 0,
          label: '审核中'
        }, {
          value: 1,
          label: '审核成功'
        }, {
          value: 2,
          label: '审核失败'
        }],
      status: null,
      loading: false,
      input: '',
      editId:0,
      tableData: [],
      title: '',
      Reason: '',
      Amount: 0.00,
      FileUrl: '',
      totalNum:0,
      pageIndex:1,
      pageSize:10,
      dialogFormVisible: false,
      dialogReason: false,
      isClick: false
    }
  },
  mounted () {
     this.init();
  },
  methods: {
    search(){
      this.pageIndex = 1;
      this.init();
    },
     crurentChange(val){
      this.pageIndex = val;
      this.init()
    },
    sizeChange(val){
      this.pageSize = val;
      this.init()
    },
    init(){
      this.loading=true;
      var data = {
          SourceType: 0,
          ApplyState: this.status,
          PageIndex: this.pageIndex,
          PageSize: this.pageSize
        };

      this.$api.integral.list(data).then((rs) => {
        this.tableData = rs.Data.Data;
        this.totalNum = rs.Data.TotalNum;
        this.loading=false;
      }).catch((res) =>{this.loading=false;})
    },
    handleClick(row){
      this.editId=row.Id;
      this.Amount=row.Amount;
      this.FileUrl=row.FileUrl;
      if (row.ApplyState===0){
        this.title='审核';
        this.Reason='';
        this.isClick=false;
      } else{
        this.title='查看';
        this.Reason=row.Reason;
        this.isClick=true;
      }
      this.dialogFormVisible=true;
    },
    submitForm(result) {
      var data = {};
      if (result)
      {
        data = {
          ApplyId: this.editId,
          ApplyState: 1,
        };
      } else{
        data = {
          ApplyId: this.editId,
          ApplyState: 2,
          Reason: this.Reason
        };
      }
      this.$api.integral.check(data).then((rs) => {
          this.$message({
              type: 'success',
              message: '提交成功!'
            });
          if (!result)
          {
            this.dialogReason=false;
          }
          this.dialogFormVisible=false;
          this.init();
        }).catch((res) =>{this.dialogFormVisible=false;})
    }
  }
}
</script>
<style lang='scss' type='text/scss' rel='stylesheet/scss'>
.container-main{
  width: 100% !important;
}
</style>
